今天實作要做的是一個瀏覽網頁時常見的一種特效，就是當你閱讀一篇很長的文章時，滾動頁面到有圖片的段落時，圖片才會從側邊淡入進來，讓人產生一種這個網頁很有質感的錯覺，實作範例如下。

邏輯流程

1. 取得所有圖片element
2. 監聽畫面捲動事件，觸發函式
3. 函式判斷畫面位置與圖片位置，決定是否滑入圖片

課程重點

1. debounce：由於實作中監聽畫面捲動事件時，每捲一格其實會觸發超級多次函式，當函式複雜的時候是會影響效能的。因此debounce就是限制一個時間內，函式只會被呼叫一次。而教材中debounce的函式已經幫你寫好

function debounce(func, wait = 20, immediate = true) {
    var timeout;
    return function () {
        var context = this, args = arguments;
        var later = function () {
          timeout = null;
          if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}

2. window.scrollY：目前畫面上邊界的Y坐標值，越下面越大
3. window.innerHeight：目前畫面的長度
4. (element).offsetTop：該元素上邊界的Y坐標值
5. (element).height：該元素的長度
6. 利用上面四個屬性，即可判斷圖片是否要滑入，實作是設定當圖片超過一半在畫面中才滑入。slideInAt是目前畫面下邊界的Y坐標，imageBottom是圖片下邊界的Y坐標，當slideInAt大於圖片上邊界+半張圖片長度時，isHalfShown為true。另外當往下滾動超過圖片時，圖片要變回隱藏，因此還要判斷有沒有滾超過，若畫面上邊界Y坐標小於圖片下邊界時，代表圖片還在畫面，isNotScrolledPast為true

   const slideInAt = (window.scrollY + window.innerHeight);
   const imageBottom = sliderImage.offsetTop + sliderImage.height;
   const isHalfShown = slideInAt > sliderImage.offsetTop + sliderImage.height / 2;
   const isNotScrolledPast = window.scrollY < imageBottom;
   if (isHalfShown && isNotScrolledPast) {
       sliderImage.classList.add('active');
   } else {
       sliderImage.classList.remove('active');
   }
   

延伸閱讀

• 實作中，function debounce(func, wait = 20, immediate = true)參數帶入值代表預設，因此若要使用預設參數，只需debounce(func)這樣呼叫即可。若要改變參數就正常給參數，如debounce(func,100)。若只要給第三個參數就debounce(func,undefined,false)